<template>
  <div class="axiom-input-number-range">
    <AxiomInputNumber
      :model-value="minValue"
      @update:modelValue="handleMinChange"
      :min="min"
      :max="maxValue"
      :step="step"
      :placeholder="startPlaceholder"
    />
    <span class="axiom-input-number-range__separator">{{ separator }}</span>
    <AxiomInputNumber
      :model-value="maxValue"
      @update:modelValue="handleMaxChange"
      :min="minValue"
      :max="max"
      :step="step"
      :placeholder="endPlaceholder"
    />
  </div>
</template>

<script>
import { computed } from 'vue';
import AxiomInputNumber from './AxiomInputNumber.vue';

export default {
  name: 'AxiomInputNumberRange',
  components: {
    AxiomInputNumber,
  },
  props: {
    modelValue: {
      type: Array,
      default: () => [null, null],
    },
    min: {
      type: Number,
      default: -Infinity,
    },
    max: {
      type: Number,
      default: Infinity,
    },
    step: {
      type: Number,
      default: 1,
    },
    startPlaceholder: {
      type: String,
      default: '最小值',
    },
    endPlaceholder: {
      type: String,
      default: '最大值',
    },
    separator: {
      type: String,
      default: '-',
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const minValue = computed(() => props.modelValue?.[0]);
    const maxValue = computed(() => props.modelValue?.[1]);

    const handleMinChange = (value) => {
      emit('update:modelValue', [value, maxValue.value]);
    };

    const handleMaxChange = (value) => {
      emit('update:modelValue', [minValue.value, value]);
    };

    return {
      minValue,
      maxValue,
      handleMinChange,
      handleMaxChange,
    };
  },
};
</script> 